{include file="head" title="类别添加" /}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">类别添加</div>
        <div class="layui-card-body" style="padding: 15px;">
            <form id="form" class="layui-form" action="" style="width:50%;">
                <input type="hidden" name="id" value="{$s->id|default=''}" />
                <input type="hidden" name="pid" value="0">
                <input type="hidden" name="path" value="0">
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" value="{$s->name|default=''}" lay-verify="required" autocomplete="off" placeholder="请输入名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">类别</label>
                    <div class="layui-input-block">
                        {:get_radio($s->mode?:'area',$modes,'mode')}
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">标注</label>
                    <div class="layui-input-block">
                        {:get_radio_pic($s->pic?:$first_pic,$pics,'pic')}
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">颜色</label>
                    <div class="layui-input-block">
                        <div class="layui-input-inline" style="width: 120px;">
                            <input type="text" name="color" readonly  value="{$s->color??'rgba(0,0,0,1)'}" placeholder="请选择颜色" class="layui-input" id="test-colorpicker-form-input">
                        </div>
                        <div class="layui-inline" style="left: -11px;">
                            <div id="test-colorpicker-dome3"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-inline">
                            <input type="number" name="sort" value="{$s->sort|default='100'}" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">值大靠前</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="sub">立即提交</button>
                        <button type="button" class="layui-btn layui-btn-primary" onclick="javascript:history.back(-1)">返回</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    layui.config({
        base: '{$Think.const.admin_tpl}/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'laydate','colorpicker'], function () {
        var $ = layui.$
            , layer = layui.layer
            , colorpicker = layui.colorpicker
            , form = layui.form;

        /* 监听提交 */
        form.on('submit(sub)', function (data) {

            // var path = $('#pid option:selected').val() == '0' ? '0' : $('#pid option:selected').attr('data-path')+'-'+$('#pid option:selected').val();

            $.ajax({
                url: "/admin/icontypes/contents_submit/",
                type: 'post',
                // data: $("#form").serialize() + '&path='+path,
                data: $("#form").serialize(),
                dataType: 'json',
                success: function (data) {
                    if(data.status==1)
                    {
                        layer.confirm('操作成功！请选择？', {
                            btn: ['继续添加','返回列表'] //按钮
                        }, function(){
                            location.reload();
                        }, function(){
                            location.href = '/admin/icontypes/types';
                        });
                    }
                    else
                    {
                        layer.msg(data.msg);
                    }
                },
                error: function (msg) {
                    alert(" 数据保存失败！" + msg);
                }
            });

            return false;
        });

        /*监听切换*/
        form.on('radio(mode)',function (data) {
            switch (data.value) {
                case 'point':
                    $("input[name=color]").attr('disabled',true);
                    $("#test-colorpicker-dome3").hide();
                    break;
                default:
                    $("input[name=color]").attr('disabled',false);
                    $("#test-colorpicker-dome3").show();
                    break;
            }
            form.render();
        });

        colorpicker.render({
            elem: '#test-colorpicker-dome3'
            // ,colors: ['#ff8c00','#00ced1','#9d8a0e'] //自定义预定义颜色项
            ,format:'rgb'
            ,color:'{$s->color??"rgba(0,0,0,1)"}'
            ,alpha:true
            ,predefine: true
            ,done: function(color){
                $('#test-colorpicker-form-input').val(color);
            }
        });



    });
    function hex2rgb(){
        var sColor = this.toLowerCase();
        if(sColor && reg.test(sColor)){
            if(sColor.length === 4){
                var sColorNew = "#";
                for(var i=1; i<4; i+=1){
                    sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
                }
                sColor = sColorNew;
            }
            //处理六位的颜色值
            var sColorChange = [];
            for(var i=1; i<7; i+=2){
                sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
            }
            return "rgb(" + sColorChange.join(",") + ")";
//或
//return "rgba(" + sColorChange.join(",") + ",0.8)";
        }else{
            return sColor;
        }
    }
</script>
{include file="foot" /}
